Skip to content
이 내용이 도움이 되었나요?

화면 닫기


1. 화면 닫기 (closeView)

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3
실행환경: Toss AppSandbox App

현재 화면을 닫는 함수예요. "닫기" 버튼을 눌러 서비스를 종료할 때 사용할 수 있어요.

시그니처

typescript
function closeView(): Promise<void>;

예제

tsx
import { Button } from 'react-native';
import { closeView } from '@granite-js/react-native';

function CloseButton() {
  return <Button title="닫기" onPress={closeView} />;
}

2. iOS 스와이프 뒤로가기 설정하기 (setIosSwipeGestureEnabled)

지원환경: WebViewWebView SDKv1.0.3
실행환경: Toss AppSandbox App

iOS에서 화면을 스와이프해 뒤로가는 제스처를 활성화하거나 비활성화해요.

시그니처

typescript
function setIosSwipeGestureEnabled(options: { isEnabled: boolean }): Promise<void>;

파라미터

  • options.isEnabled필수 · boolean

    true면 스와이프로 뒤로갈 수 있고, false면 스와이프 뒤로가기가 비활성화돼요.

예제

tsx
import { setIosSwipeGestureEnabled } from '@apps-in-toss/framework';
import { Button } from 'react-native';

function Page() {
  return (
    <>
      <Button title="스와이프 끄기" onPress={() => setIosSwipeGestureEnabled({ isEnabled: false })} />
      <Button title="스와이프 켜기" onPress={() => setIosSwipeGestureEnabled({ isEnabled: true })} />
    </>
  );
}

3. 뒤로가기 이벤트 제어하기 (useBackEvent)

지원환경: React NativeReact Native SDKv1.0.3
실행환경: Toss AppSandbox App

뒤로가기 이벤트를 등록하고 제거할 수 있는 Hook이에요.
특정 컴포넌트가 활성화된 동안에만 뒤로가기 이벤트를 처리할 수 있어요.

시그니처

typescript
function useBackEvent(): BackEventControls;

반환값

  • BackEventControls

    뒤로가기 이벤트를 제어하는 객체예요. addEventListener로 이벤트를 등록하고, removeEventListener로 제거할 수 있어요.

주의해 주세요

이 Hook은 반드시 BackEventProvider 내에서 사용해야 해요. 그렇지 않으면 에러가 발생해요.

예제

tsx
import { useEffect, useState } from 'react';
import { Alert, Button, View } from 'react-native';
import { useBackEvent } from '@granite-js/react-native';

function UseBackEventExample() {
  const backEvent = useBackEvent();
  const [handler, setHandler] = useState<{ callback: () => void } | undefined>(undefined);

  useEffect(() => {
    const callback = handler?.callback;
    if (callback != null) {
      backEvent.addEventListener(callback);
      return () => {
        backEvent.removeEventListener(callback);
      };
    }
  }, [backEvent, handler]);

  return (
    <View>
      <Button title="뒤로가기 이벤트 등록" onPress={() => setHandler({ callback: () => Alert.alert('back') })} />
      <Button title="뒤로가기 이벤트 제거" onPress={() => setHandler(undefined)} />
    </View>
  );
}